<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!--新增接口弹出modal-->
<div th:fragment="interface_add_modal" class="modal fade" id="interface_add_modal" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel_interface_a"
     aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel_interface_a">新增接口</h4>
            </div>
            <div class="modal-body">
                <div>
                    <div class="bs-component">
                        <ul class="nav nav-tabs">
                            <li class="nav-item">
                                <a class="nav-link active" data-toggle="tab" href="#interfaceBaseInfo">基本信息</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" data-toggle="tab" href="#interfaceData">接口数据</a>
                            </li>

                        </ul>
                        <div class="tab-content" id="myTabContent">
                            <div class="tab-pane fade active show" id="interfaceBaseInfo">
                                <br>
                                <form id="interface_add_form" class="form-horizontal">
                                    <div id="interface_alertMessage_add"
                                         class="alert alert-warning alert-dismissible fade in"
                                         role="alert"
                                         style="display: none">
                                        <button type="button" class="close" data-dismiss="alert"
                                                aria-label="Close"><span
                                                aria-hidden="true">×</span>
                                        </button>
                                        <strong>提示</strong> 输入信息错误，请检查！
                                    </div>

                                    <div class="form-group">
                                        <label class="col-sm-3 control-label">接口名称</label>
                                        <div class="col-sm-12">
                                            <input id="interfaceName_a" name="interfaceName" type="text"
                                                   class="form-control"
                                                   placeholder="interface name">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label">接口地址</label>
                                        <div class="col-sm-12">
                                            <div class="input-group">
                                                <div class="input-group-prepend"><span
                                                        class="input-group-text">/</span></div>
                                                <input class="form-control" id="interfaceUrl" name="uri"
                                                       type="text"
                                                       placeholder="example/uri">
                                            </div>
                                        </div>

                                    </div>

                                    <div class="form-group">
                                        <label class="col-sm-3 control-label">所属项目</label>
                                        <div class="col-sm-10">
                                            <label>
                                                <select id="belongProject" class="form-control"
                                                        name="belongTo">
                                                </select>
                                            </label>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="col-sm-3 control-label">接口模板编号</label>
                                        <div class="col-sm-12">
                                            <input id="example_a" name="exampleId" type="text" class="form-control"
                                                   placeholder="接口模板id，系统自动生成" readonly>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <div class="tab-pane fade" id="interfaceData">
                                <br>
                                <!--json edit area-->
                                <div id="jsonEditor_add" style="height: 500px"></div>

                            </div>

                        </div>
                    </div>
                </div>


            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button id="addInterfaceBtn" type="button" class="btn btn-primary" onclick="addInterface()">保存</button>
            </div>
        </div>
    </div>

</div>
<!--修改接口弹出modal-->
<div th:fragment="interface_update_modal" class="modal fade" id="interface_update_modal" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel_interface_update"
     aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel_interface_u">修改接口信息</h4>
            </div>
            <div class="modal-body">
                <div>
                    <div class="bs-component">
                        <ul class="nav nav-tabs">
                            <li class="nav-item">
                                <a class="nav-link active" data-toggle="tab" href="#interfaceBaseInfo_update">基本信息</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" data-toggle="tab" href="#interfaceData_update">接口数据</a>
                            </li>

                        </ul>
                        <div class="tab-content" id="myTabContent_update">
                            <div class="tab-pane fade active show" id="interfaceBaseInfo_update">
                                <br>
                                <form id="interface_update_form" class="form-horizontal">
                                    <div id="interface_alertMessage_update"
                                         class="alert alert-warning alert-dismissible fade in"
                                         role="alert"
                                         style="display: none">
                                        <button type="button" class="close" data-dismiss="alert"
                                                aria-label="Close"><span
                                                aria-hidden="true">×</span>
                                        </button>
                                        <strong>提示</strong> 输入信息错误，请检查！
                                    </div>

                                    <div class="form-group">
                                        <label class="col-sm-3 control-label">接口编号</label>
                                        <div class="col-sm-12">
                                            <input id="interfaceId_update" name="interfaceId" type="text"
                                                   class="form-control"
                                                   placeholder="interface id" readonly>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label">接口名称</label>
                                        <div class="col-sm-12">
                                            <input id="interfaceName_update" name="interfaceName" type="text"
                                                   class="form-control"
                                                   placeholder="interface name">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label">接口地址</label>
                                        <div class="col-sm-12">
                                            <div class="input-group">
                                                <div class="input-group-prepend"><span
                                                        class="input-group-text">/</span></div>
                                                <input class="form-control" id="interfaceUrl_update" name="uri"
                                                       type="text"
                                                       placeholder="example/uri">
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="col-sm-3 control-label">所属项目</label>
                                        <div class="col-sm-10">
                                            <label>
                                                <select id="belongProject_update" class="form-control"
                                                        name="belongTo">
                                                </select>
                                            </label>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="col-sm-3 control-label">接口模板编号</label>
                                        <div class="col-sm-12">
                                            <input id="example_update" name="exampleId" type="text" class="form-control"
                                                   placeholder="接口模板id，系统自动生成" readonly>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <div class="tab-pane fade" id="interfaceData_update">
                                <br>
                                <!--json edit area-->
                                <div id="jsonEditor_update" style="height: 500px;"></div>
                            </div>

                        </div>
                    </div>
                </div>


            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button id="updateInterfaceBtn" type="button" class="btn btn-primary" onclick="updateInterface()">更新
                </button>
            </div>
        </div>
    </div>

</div>


</html>